<script setup>
/**
 * 聊天消息用户展示模块
 * 在左侧消息按钮点击后显示
 */
import LeftUserListBox from '../contact/components/ContactMessageUserListBox.vue'
import { ref, onMounted } from 'vue'
import { useInChatContactInfStore } from '@/stores/useInChatContactInfStore.js'
import { getChatContactsMessageAPI } from '@/api/messageAPI.js'

const inChatContactInfStore = useInChatContactInfStore()

//渲染的聊天消息列表
const chatContactList = ref()

/**
 * 获取聊天消息列表
 */
const getChatContactsMessageList = async () => {
    const res = await getChatContactsMessageAPI()
    if (res.data.code === 1) {
        chatContactList.value = res.data.data
        console.log(res.data.data)
    } else {
        console.error('获取聊天消息列表失败')
    }
}

onMounted(() => {
    getChatContactsMessageList()
})
</script>

<template>
    <div>
        <LeftUserListBox
            v-for="(item) in chatContactList"
            @click="
                () => {
                    inChatContactInfStore.id = item.targetId
                    inChatContactInfStore.headImgUrl = item.headImgUrl
                    inChatContactInfStore.username = item.userName
                }
            "
            :username="item.userName"
            :head-img-url="item.headImgUrl"
            :message="item.content"
        />
    </div>
</template>

<style scoped></style>
